<template>
  <div>
    <h1>v-if和v-show指令</h1>
    <div v-show="isShow">v-show的盒子</div>
    <div v-if="isShow">v-if的盒子</div>
    <!-- 
      v-show: 用于控制一个元素的显示和隐藏的
        v-show="值" 如果这个值是true，这个元素就会显示 如果这个值是false，这个元素就会隐藏
      v-if:  用于控制一个元素的显示和隐藏
        v-if="值" 如果这个值是true，这个元素就会显示 如果这个值是false，这个元素就会隐藏

      区别：
        v-show:是通过样式display来控制元素的显示和隐藏
        v-if: 是通过删除和创建元素来控制显示和隐藏

      如果一个元素需要频繁的显示和隐藏，推荐使用  v-show

      如果一个盒子要么显示，要么隐藏，，，推荐使用v-if
    -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false
    }
  }
}
</script>

<style>

</style>